<template>
    <el-dialog v-model="compReportVisible" title="报税汇总"  @opened="opened"  width="60%"  @close="closeTxDialog" >
        <div class="page-container" v-loading="pageLoading">
            <el-card >
                <template #header>
                <div class="card-header">
                    <span>报税汇总详情</span>
                </div>
                </template>
                <el-table :data="data" border>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column prop="month" label="日期"></el-table-column>
                    <el-table-column prop="workerName" label="姓名"></el-table-column>
                    <el-table-column prop="cardId" label="身份证号"></el-table-column>
                    <el-table-column prop="bankCard" label="银行卡号"></el-table-column>
                    <el-table-column prop="amount" label="金额(元)">
                        <template #default="scope">
                         {{proxy?.convertFenToYuan(scope.row.amount)}}
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                    v-if="total > 0"
                    v-model:total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getTaskDetail"
                />
            </el-card>
        </div>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import {taxRecordsDetail} from '@/api/sw/index'
  const route = useRoute();  
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const pros = defineProps(['title','openCheck','id','item']);
  const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])

  const compReportVisible= ref(false)


  compReportVisible.value = pros.openCheck;
  const closeTxDialog =()=>{
      compReportVisible.value = false;
      emit('dialogClose',{tag:1});
 }


  
  const pageLoading = ref(true);

  
  /**
   * TODO
   * 查询角色信息字典
   * 回显label
   * 角色信息字典名称未知
  */
  const list = toRefs<any>(proxy?.useDict("sys_role"));
  const {plat_role} =  toRefs<any>(proxy?.useDict("plat_role"));
  const {worker_verify_status} =  toRefs<any>(proxy?.useDict("worker_verify_status"));
  const {woker_task_status} =  toRefs<any>(proxy?.useDict("woker_task_status"));
  const {settlement_status} =  toRefs<any>(proxy?.useDict("settlement_status"));


  const taskItem = ref({
    trId:null
  })
  const data = ref([])
  const total = ref(0)

  const queryParams = ref({
    pageNum:1,
    pageSize:10,
    id:null
  })

  taskItem.value = pros.item;
  
 
  //查询任务详情
  const getTaskDetail = ()=>{
    taxRecordsDetail({
        trId:taskItem.value.id,
        ...queryParams
    }).then(res=>{
        data.value = res.rows;
        total.value = res.total;
    });

  }


  const opened = ()=>{
    queryParams.value.pageNum = 1;
    queryParams.value.pageSize = 10;
    getTaskDetail();
}
  
onMounted(() => {
    setTimeout(() => {
        pageLoading.value = false
    }, 500);
})

  
    watch(() => pros.openCheck, async val => {
            compReportVisible.value =  val;
        }
    );

    watch(() => pros.item, async val => {
            taskItem.value = val;
    }
);

  </script>
  
  <style scoped lang="scss">
  .page-container {
    height: calc(100vh - 189px);
    overflow-y: auto;
  
    .footer {
      background: #fff;
      text-align: center;
      z-index: 999;
      margin-top: 20px;
    }
  }
  </style>
  